<template>
	<view class="">
		<view class="example" style="margin-top: 20rpx;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="200rpx" label-position="rigth">
				<view class="" style="padding: 30rpx;">
					<uni-forms-item label="被护理人姓名" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别" name="sex" v-if="formData.idType==2">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.sex" :localdata="range" @change="change"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<uni-forms-item label="年龄" name="age" v-if="formData.idType==2">
						<uni-easyinput v-model="formData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="证件类型" name="idType">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.idType" :localdata="idTypeArray" @change="changeidType"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<uni-forms-item label="上传证件照片" name="IDImg" v-if="formData.idType==1">
						<uni-file-picker ref="files" limit='1' @select="select" @progress="progress" @success="success"
							@fail="fail" :auto-upload="false" v-model="formData.IDImg" file-mediatype="image" />
					</uni-forms-item>


					<uni-forms-item label="身份证号" name="idNumber" v-if="formData.idType==1">
						<uni-easyinput type="text" v-model="formData.idNumber" maxlength="18" placeholder="请输入身份证号" />
					</uni-forms-item>
					<view class="" style="border-bottom: 1rpx solid #E8E8E8;">

					</view>

					<uni-forms-item label="" name="isDefault" label-width="0rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="formData.isDefault" :multiple="true" class="checkBox"
								:localdata="defaultArray" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
				</view>
				<view class="" style="border-bottom: 20rpx solid #F1F4FC;">

				</view>
				<view class="" style="padding: 30rpx;border-bottom: 4rpx solid #F1F4FC;">
					<text style="color: #000000BF;font-size: 30rpx;">健康档案</text>
					<text style="color: #a3a3a3; font-size: 26rpx;">(为了更好的服务您，请补充被护理人情况)</text>
				</view>
				<view class="" style="padding: 30rpx;">
					<uni-forms-item label="过敏史" name="allergyHistory" label-width="450rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="allergy" :localdata="allergyHistoryArr" @change="change"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<view class="" v-if="allergy">
						<uni-easyinput maxlength="500" type="textarea" autoHeight v-model="formData.allergyHistory"
							placeholder="可填写药物过敏史,包括对应的过敏药物及过敏 原信息" />
						<view class=""
							style="position: absolute;margin-top: -60rpx;display: flex;margin-left: 570rpx;color: #a3a3a3;">
							{{formData.allergyHistory.length}}/500

						</view>
					</view>
					<uni-forms-item label="家族史" name="familyHistory" label-width="450rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="family" :localdata="familyHistoryArr" @change="change"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<view class="" v-if="family">
						<uni-easyinput maxlength="500" type="textarea" autoHeight v-model="formData.familyHistory"
							placeholder="可填写遗传病相关信息" />
						<view class=""
							style="position: absolute;margin-top: -60rpx;display: flex;margin-left: 570rpx;color: #a3a3a3;">
							{{formData.familyHistory.length}}/500
						</view>
					</view>
					<uni-forms-item label="继往史" name="medicalHistory" label-width="450rpx">
						<view class="" style="padding-top: 14rpx;">
							<uni-data-checkbox v-model="past" :localdata="pastHistoryArr" @change="change"
								class="checkBox" selectedColor="#0ABA94"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<view class="" v-if="past">
						<uni-easyinput maxlength="500" type="textarea" autoHeight v-model="formData.medicalHistory"
							placeholder="可填写以前的病患情况,包括传染病或重大疾病信息" />
						<view class=""
							style="position: absolute;margin-top: -60rpx;display: flex;margin-left: 570rpx;color: #a3a3a3;">
							{{formData.medicalHistory.length}}/500
						</view>
					</view>

				</view>
			</uni-forms>
			<view class="" style="height: 200rpx;background: #F1F4FC;">

			</view>
		</view>
		<view class="" style="position: fixed; bottom: 30rpx;">
			<view class=""
				style="  display: flex;font-size: 24rpx;justify-content: center;width: 750rpx;align-items: center;">
				<uni-data-checkbox v-model="defaultAgree" :multiple="true" :localdata="agreeArray" class="checkBox"
					selectedColor="#0ABA94"></uni-data-checkbox>
				<text style="margin-left: -40rpx;">我已阅读并同意</text>
				<text style="color: #0ABA94; ">平台协议</text>
			</view>
			<view class="" style="display: flex; justify-content: center;width: 750rpx;">
				<button class="button" @click="submit">提交</button>
			</view>

		</view>
	</view>


</template>

<script>
	import requestHttp from '@/providers/essential/httpService.js'
	import api from '@/providers/API/api.js'
	export default {
		data() {
			return {
				defaultAgree: false,
				isDefault: false,
				// 表单数据
				subData: null,
				formData: {
					cardphoto: '',
					merchantId: 230,
					name: '',
					isDefault: [0],
					sex: 1,
					idType: 1,
					idNumber: '',
					allergyHistory: '',
					familyHistory: '',
					medicalHistory: '',



				},
				allergy: 0,
				family: 0,
				past: 0,

				range: [{
					"value": 1,
					"text": "男"
				}, {
					"value": 2,
					"text": "女"
				}],
				idTypeArray: [{
					"value": 1,
					"text": "身份证"
				}, {
					"value": 2,
					"text": "其他"
				}],
				defaultArray: [{
					"value": true,
					"text": "设为默认"
				}, ],
				allergyHistoryArr: [{
					"value": 0,
					"text": "无"
				}, {
					"value": 1,
					"text": "有"
				}],
				familyHistoryArr: [{
					"value": 0,
					"text": "无"
				}, {
					"value": 1,
					"text": "有"
				}],
				pastHistoryArr: [{
					"value": 0,
					"text": "无"
				}, {
					"value": 1,
					"text": "有"
				}],
				agreeArray: [{
					"value": 0,
					"text": " "
				}, ],
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 1,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},

					idNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证',
						}, ]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '请输入年龄',
						}]
					}



					// 对email字段进行必填验证

				}
			}
		},
		onLoad() {

		},
		methods: {

			// 获取上传进度
			 
			select(e) {
				 
				console.log('选择文件：', e.tempFilePaths[0])
				this.formData.cardphoto = e.tempFilePaths[0]
				let url = "/app-api/infra/file/upload"
				let data = {
					filePath: e.tempFilePaths[0],
					name:'file'

				}
				console.log(data, 'data')
				requestHttp.uploadData(url, data).then((res) => {
					console.log(res, 'res')
					if (res.code == 1) {
						this.formData.cardphoto = res.data
					}
				})


			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.postWay()

				}).catch(err => {
					console.log('表单错误信息：', err);
				})


			},
			postWay() {
				var data = this.formData
				if (data.isDefault.length) {
					data.isDefault = true
				} else {
					data.isDefault = false
				}
				if (this.formData.idType == 1) {
					if (!data.cardphoto) {
						uni.showToast({
							title: '请上传证件照',
							icon: 'error',

						})
						return;
					}
					delete(data.sex)
					delete(data.age)
				} else {
					delete(data.cardphoto)
					delete(data.idNumber)
				}

				let url = api.addArchives
				console.log(api.addArchives, 'addArchives')
				requestHttp.postData(url, data).then((res) => {
					console.log(res, 'res')
					if (res.code == 1) {
						uni.showToast({
							title: '创建成功',
							icon: 'none',

						})
						setTimeout(res => {
							uni.navigateBack()
						}, 1000)

					} else if (res.msg) {
						uni.showToast({
							title: res.msg, //显示的文字 
						})

					}

				})
				// return;

			},
			change(e) {
				// console.log('e:', e);
			},
			changeidType(e) {
				this.idType = e.detail.data.value
			}
		}
	}
</script>

<style>
	page {
		background: #F1F4FC;
	}


	.example {
		/* width: 100%; */
		/* padding: 30rpx; */
		background-color: #fff;
	}


	.button {


		display: flex;
		align-items: center;
		justify-content: center;
		width: 680rpx;
		/* margin: 56upx auto; */
		background-color: #0ABA94;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 40rpx;
		height: 80rpx;
	}
</style>